<template>
  <n-el tag="div" class="div-two02-three01">
    <n-el tag="div" class="main-box" v-for="item in data_list" :key="item" @click="toForecast(item.code)">
      <n-el tag="div">
        <span class="stock-code">{{ item.code }}</span>
        <span style="font-size: 20px">
          {{ item.name }}
        </span>
        <span class="label-right-top">{{ item.category }}</span>
      </n-el>
    </n-el>
  </n-el>
  <n-el tag="div" class="div-two02-three03">
    <n-pagination
      v-model:page="data_list_page"
      :page-count="data_list_total_page"
      @update-page="pageChange"
    />
  </n-el>
</template>


<script setup lang="ts" name="HZForecast03">
import { onMounted } from "vue";
import * as curdApi from "/@api/hz-curd-api";
import { ref, inject } from "vue";

// 通过 inject 函数将父组件提供的 sendMessage 函数注入进来
// 提供类型注解告诉 TypeScript 这是一个函数
const sendMessage = inject("sendMessage") as (msg: string) => void;

const message = ref("");

const isShowAll = ref(true);
const state = reactive({
  staffWordCountTimer: null,
});
const data_list = ref([]);
const data_list_category = ref(0);
const data_list_page = ref(1);
const data_list_total_page = ref(1);

onMounted(() => {
  loadDataList();
});

function categoryChange(category: any) {
  // 如果切换的是同一个分类，不做处理
  if (data_list_category.value === category) {
    return;
  }
  // 切换显示的内容
  if (category === 0) {
    isShowAll.value = true;
    // 销毁所有定时器
    if (state.staffWordCountTimer != null) {
      clearInterval(state.staffWordCountTimer);
    }
  } else {
    isShowAll.value = false;
  }
  data_list_category.value = category;
  data_list_page.value = 1;
  loadDataList();
}

function loadDataList() {
  getCom5().then((res: any) => {
    data_list.value = res.data.items;
    data_list_total_page.value = res.data.totalPage;
  });
}

const getCom5 = async () => {
  return await curdApi.goGet(
    {
      category: data_list_category.value,
      page: data_list_page.value,
      size: 30,
    },
    "/api/bilibili/StockList/"
  );
};

function pageChange(page: any) {
  data_list_page.value = page;
  loadDataList();
}

function toForecast(code: string) {
  if (sendMessage) {
    sendMessage(code);
  }
}
</script>

<style scoped>
::-webkit-scrollbar {
  display: none;
}

.div-two02-three01 {
  width: 100%;
  height: 93%;
  display: flex;
  flex-direction: row;
  overflow: auto;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2%;
  max-height: 95vh; /* 在这里可以设置你希望的最大高度 */
}

.main-box {
  width: 98%;
  height: 7%;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-items: center;
  transform: scale(0.9);
  background-color: #3636368e;
  border: 1px solid #ccc;
  transition: background-color 0.3s ease;
  cursor: pointer; /* Add this line */
}

.main-box:hover {
  background-color: #73737377;
}

.main-box:active {
  border-color: #2b2b2b79;
  background-color: #2b2b2b79;
}

.div-two02-three03 {
  width: 100%;
  height: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5%;
}

.label-right-top {
  position: absolute;
  right: -10px;
  top: -5px;
  padding: 2px 6px;
  background-color: #007bff;
  color: white;
  border-radius: 8px;
  font-size: 14px;
}

.stock-code {
  position: absolute;
  left: 10px;
  top: 10px;
}
</style>